<template>
  <div class="front shopProduct docWidth">
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="productBox">
      <div class="imgs">
        <SwiperPiczoom :imgs="detail.images" />
      </div>
      <div class="product">
        <div class="name">
          <p>{{detail.name}}</p>
        </div>
        <img src="@/assets/front-img/haveinhand.png" alt="" class="status" v-if="detail.status == 2">
        <img src="@/assets/front-img/completed.png" alt="" class="status" v-if="detail.status == 3">
        <img src="@/assets/front-img/cancelled.png" alt="" class="status" v-if="detail.status == 99">
        <table cellpadding="0" cellspacing="0" class="specifications">
          <tr>
            <td>地区</td>
            <td>{{detail.startProvinceName}}{{detail.startCityName}}</td>
          </tr>
          <tr>
            <td>集采时间</td>
            <td>{{detail.startDate}} ~ {{detail.endDate}}</td>
          </tr>
          <tr>
            <td>成团数量</td>
            <td>{{detail.totalNum}}</td>
          </tr>
          <tr>
            <td>采购价</td>
            <td>{{detail.topPrice}}/{{detail.unit}}</td>
          </tr>
          <tr>
            <td>已报名企业数量</td>
            <td>{{detail.finishCompanyNum}}</td>
          </tr>
          <tr>
            <td>已申请数量</td>
            <td>{{detail.finishNum}}</td>
          </tr>
        </table>
        <div v-if="!payStatus" class="tip1">提醒：您还没有交保证金，交保证金后再报名</div>
        <div v-else class="tip2">您已交保证金，可立即报名</div>
        <el-row style="margin-top:27px;" :gutter="30">
          <el-col :span="8" v-if="detail.isApply != 99">
            <!-- <div class="payBtn" @click="dialogFormVisible = true">立即报名</div> -->
            <div class="payBtn" v-if="detail.isApply === 0" v-loading.fullscreen.lock="screenLoading" @click="startBidding">立即报名</div>
            <div class="payBtn" v-else>已报名</div>
          </el-col>
          <el-col :span="4">
            <div class="back" @click="$router.go(-1)">返回</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="productDetailBox">
      <div class="detail">
        <el-tabs type="border-card">
          <el-tab-pane label="商品详情">
            <div v-html="detail.remark"></div>
          </el-tab-pane>
          <el-tab-pane label="报名信息">
            <table cellpadding="0" cellspacing="0" class="infor">
              <tr>
                <th>企业名称</th>
                <th>集采数量</th>
                <th>单位</th>
                <th>状态</th>
                <th>创建时间</th>
              </tr>
              <template v-if="detail.details && detail.details.length > 0">
                <tr v-for="infor in detail.details" :key="infor.id">
                  <td>{{infor.companyName}}</td>
                  <td>{{infor.num}}</td>
                  <td>{{infor.unit}}</td>
                  <td>{{infor.statusText}}</td>
                  <td>{{infor.createTime}}</td>
                </tr>
              </template>
              <tr v-else>
                <td colspan="5">暂无数据</td>
              </tr>
            </table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <table cellpadding="0" cellspacing="0" class="specifications">
        <tr>
          <td>名称</td>
          <td>{{detail.name}}</td>
        </tr>
        <tr>
          <td>成团数量</td>
          <td>{{detail.totalNum}}</td>
        </tr>
        <tr>
          <td>已成团数量</td>
          <td>{{detail.finishNum}}</td>
        </tr>
        <tr>
          <td>采购价格</td>
          <td>{{detail.topPrice}}元/{{detail.unit}}</td>
        </tr>
      </table>
      <el-row style="margin-top:17px;">
        <el-col :span="6" style="margin-top: 10px;">报名数量：</el-col>
        <el-col :span="5">
          <el-input-number v-model="num" :min="1" :max="detail.subNum" controls-position="right" size="small">
          </el-input-number>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="applyOrCancel">确 定</el-button>
      </div>
    </el-dialog>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { createOrderPay, orderCheckPay } from "@/api/mall.js"
import { focusGetById, focusApplyOrCancel } from "@/api/front-transaction.js";
import SwiperPiczoom from '../shop/productDetail/components/SwiperPiczoom/index'
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
export default {
  name: '',
  components: { SwiperPiczoom, Footer, Header },
  data() {
    return {
      dialogFormVisible: false,
      // submitFlag: false,
      detail: {},
      skuIndex: -1,
      num: 1,
      screenLoading: false,
      payStatus: false
    };
  },
  computed: {
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const params = {
        id: this.$route.query.id
      }
      focusGetById(params).then((res) => {
        this.detail = res || {}
        this.checkPayStatus();
      });
    },
    applyOrCancel() {
      let confirmMoney = (this.num * this.detail.topPrice * 0.1).toFixed(2);
      this.$confirm(`请前往支付${confirmMoney}元保证金`, '提示', {
        confirmButtonText: '去支付',
        cancelButtonText: '取消',
      }).then(() => {
        let params = { money: confirmMoney, num: this.num, originalId: this.detail.id, type: 20 }
        this.screenLoading = true;

        createOrderPay(params).then(response => {
          this.screenLoading = false;
          
          //新建窗口打开
          const { href } = this.$router.resolve({
            path: "/confirm-pay",
            query: {
              id: response, 
              amount: confirmMoney, orderNb: '', 
              isPay: 1, 
              deposit: true,
              channel: '99'
            }
          });
          window.open(href, '_blank');

          this.dialogFormVisible = false
          this.$confirm('是否支付保证金？', '提示', {
            confirmButtonText: '已支付',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.screenLoading = true
            setTimeout(() => {
              this.screenLoading = false
              this.checkPayStatus();
            }, 1500);
          }).catch(() => {
            this.screenLoading = true
            setTimeout(() => {
              this.screenLoading = false
              this.checkPayStatus();
            }, 1500);
          });
        }).catch(error => {
          this.screenLoading = false;
          console.log(error);
        })
      }).catch(() => {
                
      });
    },
    async startBidding() {
      await this.checkPayStatus()
      if (this.payStatus) {
        const params = {
          id: this.$route.query.id,
          num: 0
        }
        
        focusApplyOrCancel(params).then((res) => {
          this.getDetail()
          this.dialogFormVisible = false
          this.$message({
            message: `报名成功`,
            type: 'success'
          });
        }).catch(err => {
          // this.submitFlag = false
        })
      } else {
        this.dialogFormVisible = true
      }
    },
    async checkPayStatus() { // 是否交保证金
      let params = { originalId: this.detail.id, type: 20 }
      this.payStatus = await orderCheckPay(params)
    },
  },
};
</script>
<style lang="scss" scoped>
.shopProduct {
  .productBox {
    margin-top: 30px;
    display: flex;
    .imgs {
      width: 430px;
      z-index: 1;
    }
    .product {
      position: relative;
      flex: 1;
      margin-left: 36px;
      .status {
        position: absolute;
        right: 20px;
        top: 158px;
        z-index: 2;
        width: 85px;
        height: 72px;
      }
      .name {
        line-height: 1.5;
        font-size: 18px;
        color: #000;
        display: flex;
        p {
          flex: 1;
        }
        span {
          font-size: 16px;
          color: #ff9c00;
          cursor: pointer;
        }
      }
      .payBtn {
        line-height: 44px;
        font-size: 18px;
        color: #fff;
        background: #965f29;
        width: 187px;
        text-align: center;
        cursor: pointer;
      }
      .back {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background-color: #965f29;
        cursor: pointer;
      }
      .price {
        margin-top: 17px;
        padding: 0 22px;
        line-height: 54px;
        font-size: 16px;
        color: #000;
        background: #e9e9e9;
        span {
          color: #965f29;
        }
      }
      .skuList {
        overflow: hidden;
        .skuItem {
          float: left;
          padding: 6px 16px;
          font-size: 15px;
          font-weight: 300;
          color: #000;
          line-height: 2;
          cursor: pointer;
          margin: 0 10px 10px 0;
          border: 1px solid #b7b7b7;
          &.on {
            color: #965f29;
            border-color: #965f29;
          }
        }
      }
    }
    .shop {
      width: 280px;
      box-sizing: border-box;
      border: 1px solid #e5e5e5;
      padding: 30px 28px;
      .name {
        font-size: 18px;
        color: #000;
      }
    }
  }
  .productDetailBox {
    display: flex;
    margin-top: 50px;
    .tuijian {
      width: 270px;
      .title {
        background: #000000;
        line-height: 41px;
        font-size: 16px;
        color: #fff;
        padding: 0 32px;
      }
      ul {
        padding: 30px;
        border: 1px solid #e5e5e5;
        li {
          cursor: pointer;
          padding-bottom: 25px;
          .image {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            height: 210px;
            border: 1px solid #e5e5e5;
          }
          .name {
            padding-top: 15px;
            line-height: 1.3;
            font-size: 18px;
            font-weight: 400;
            color: #000;
          }
          .price {
            line-height: 1.3;
            font-size: 15px;
            color: #000;
            padding: 5px 0;
          }
          .productShop {
            line-height: 1.3;
            font-size: 14px;
            font-weight: 400;
            color: #555;
          }
        }
      }
    }
    .detail {
      flex: 1;
      z-index: 1;
    }
  }
}
.specifications {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;
  td {
    border: 1px solid #dddddd;
  }
  td:first-child {
    padding-right: 35px;
    width: 172px;
    height: 40px;
    font-size: 14px;
    text-align: right;
    color: #000000;
    background-color: #fffbfa;
  }
  td:last-child {
    padding-left: 22px;
  }
}
.infor {
  border-collapse: collapse;
  width: 100%;
  th,
  td {
    border: 1px solid #dddddd;
    height: 40px;
    text-align: center;
    font-size: 14px;
    color: #000000;
  }
  th {
    font-weight: normal;
    background-color: #fffbfa;
  }
}

  .tip1 {
    padding: 5px 10px;
    margin-top: 10px;
    width: 280px;
    font-size: 13px;
    border-radius: 5px;
    background-color: rgb(252,245,233);
    color: #E6A23C;
  }
  .tip2 {
    padding: 5px 10px;
    margin-top: 10px;
    width: 180px;
    font-size: 13px;
    border-radius: 5px;
    background-color: rgb(237,249,232);
    color: #67C23A;
  }
</style>
